<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pagination 分页 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <!--begin: Pagination -->
    <div class="card">
        <div class="card-head">
            <div class="card-head-label">
                <h3 class="card-head-title">
                    分页
                </h3>
            </div>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <!--begin: Section-->
                <div class="e-section">
                    <div class="e-section-desc">基础</div>
                    <div class="e-section-content">
                        <!--str: Pagination-->
                        <div class="e-pagination e-pagination--brand">
                            <ul class="e-pagination-links">
                                <li class="e-pagination-link--first">
                                    <a href="#"><i class="fa fa-angle-double-left e-font-brand"></i></a>
                                </li>
                                <li class="e-pagination-link--next">
                                    <a href="#"><i class="fa fa-angle-left e-font-brand"></i></a>
                                </li>
                                <li>
                                    <a href="#">...</a>
                                </li>
                                <li>
                                    <a href="#">29</a>
                                </li>
                                <li>
                                    <a href="#">30</a>
                                </li>
                                <li>
                                    <a href="#">31</a>
                                </li>
                                <li class="e-pagination-link--active">
                                    <a href="#">32</a>
                                </li>
                                <li>
                                    <a href="#">33</a>
                                </li>
                                <li>
                                    <a href="#">34</a>
                                </li>
                                <li>
                                    <a href="#">...</a>
                                </li>
                                <li class="e-pagination-link--prev">
                                    <a href="#"><i class="fa fa-angle-right e-font-brand"></i></a>
                                </li>
                                <li class="e-pagination-link--last">
                                    <a href="#"><i class="fa fa-angle-double-right e-font-brand"></i></a>
                                </li>
                            </ul>
                            <div class="e-pagination-toolbar">
                                <select class="form-control e-font-brand" style="width: 60px;">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="30">30</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                </select>
                                <span class="pagination-desc">
                                    当前显示 1 - 10 共 200 条数据
                                </span>
                            </div>
                        </div>
                        <!--end: Pagination-->
                    </div>

                    <!--end: Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin: Section-->
                    <div class="e-section">
                        <div class="e-section-desc">你可以在<code>div.e-pagination</code>上添加<code>.e-pagination--sm</code>设置使用较小分页
                        </div>
                        <div class="e-section-content">

                            <!--begin: Pagination(sm)-->
                            <div class="e-pagination e-pagination--sm e-pagination--danger">
                                <ul class="e-pagination-links">
                                    <li class="e-pagination-link--first">
                                        <a href="#"><i class="fa fa-angle-double-left e-font-danger"></i></a>
                                    </li>
                                    <li class="e-pagination-link--next">
                                        <a href="#"><i class="fa fa-angle-left e-font-danger"></i></a>
                                    </li>
                                    <li>
                                        <a href="#">...</a>
                                    </li>
                                    <li>
                                        <a href="#">29</a>
                                    </li>
                                    <li class="e-pagination-link--active">
                                        <a href="#">30</a>
                                    </li>
                                    <li>
                                        <a href="#">31</a>
                                    </li>
                                    <li>
                                        <a href="#">32</a>
                                    </li>
                                    <li>
                                        <a href="#">33</a>
                                    </li>
                                    <li>
                                        <a href="#">34</a>
                                    </li>
                                    <li>
                                        <a href="#">...</a>
                                    </li>
                                    <li class="e-pagination-link--prev">
                                        <a href="#"><i class="fa fa-angle-right e-font-danger"></i></a>
                                    </li>
                                    <li class="e-pagination-link--last">
                                        <a href="#"><i class="fa fa-angle-double-right e-font-danger"></i></a>
                                    </li>
                                </ul>
                                <div class="e-pagination-toolbar">
                                    <select class="form-control e-font-danger" style="width: 60px;">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    <span class="pagination-desc">
                                当前显示 1 - 10 共 200 条数据
                            </span>
                                </div>
                            </div>

                            <!--end: Pagination-->
                            <div class="e-separator e-separator--space-md e-separator--border-dashed"></div>
                            <div class="e-section-desc">
                                你可以在<code>div.e-pagination</code>上添加<code>.e-pagination--lg</code>设置使用较大分页
                            </div>
                            <!--begin: Pagination(lg)-->
                            <div class="e-pagination e-pagination--lg e-pagination--success">
                                <ul class="e-pagination-links">
                                    <li class="e-pagination-link--first">
                                        <a href="#"><i class="fa fa-angle-double-left e-font-success"></i></a>
                                    </li>
                                    <li class="e-pagination-link--next">
                                        <a href="#"><i class="fa fa-angle-left e-font-success"></i></a>
                                    </li>
                                    <li>
                                        <a href="#">...</a>
                                    </li>
                                    <li>
                                        <a href="#">29</a>
                                    </li>
                                    <li>
                                        <a href="#">30</a>
                                    </li>
                                    <li>
                                        <a href="#">31</a>
                                    </li>
                                    <li>
                                        <a href="#">32</a>
                                    </li>
                                    <li class="e-pagination-link--active">
                                        <a href="#">33</a>
                                    </li>
                                    <li>
                                        <a href="#">34</a>
                                    </li>
                                    <li>
                                        <a href="#">...</a>
                                    </li>
                                    <li class="e-pagination-link--prev">
                                        <a href="#"><i class="fa fa-angle-right e-font-success"></i></a>
                                    </li>
                                    <li class="e-pagination-link--last">
                                        <a href="#"><i class="fa fa-angle-double-right e-font-success"></i></a>
                                    </li>
                                </ul>
                                <div class="e-pagination-toolbar">
                                    <select class="form-control e-font-success" style="width: 60px;">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="30">30</option>
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                    </select>
                                    <span class="pagination-desc">
                                当前显示 1 - 10 共 200 条数据
                            </span>
                                </div>
                            </div>
                            <!--end: Pagination-->
                        </div>

                        <!--end: Section-->
                        <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                        <!--begin: Section-->
                        <div class="e-section">
                            <div class="e-section-desc">
                                你可以在<code>div.e-pagination</code>上添加<code>.e-pagination--circle</code>设置圆形按钮
                            </div>
                            <div class="e-section-content">

                                <!--begin: Pagination-->
                                <div class="e-pagination e-pagination--brand e-pagination--circle">
                                    <ul class="e-pagination-links">
                                        <li class="e-pagination-link--first">
                                            <a href="#"><i class="fa fa-angle-double-left e-font-brand"></i></a>
                                        </li>
                                        <li class="e-pagination-link--next">
                                            <a href="#"><i class="fa fa-angle-left e-font-brand"></i></a>
                                        </li>
                                        <li>
                                            <a href="#">...</a>
                                        </li>
                                        <li>
                                            <a href="#">29</a>
                                        </li>
                                        <li>
                                            <a href="#">30</a>
                                        </li>
                                        <li class="e-pagination-link--active">
                                            <a href="#">31</a>
                                        </li>
                                        <li>
                                            <a href="#">32</a>
                                        </li>
                                        <li>
                                            <a href="#">33</a>
                                        </li>
                                        <li>
                                            <a href="#">34</a>
                                        </li>
                                        <li>
                                            <a href="#">...</a>
                                        </li>
                                        <li class="e-pagination-link--prev">
                                            <a href="#"><i class="fa fa-angle-right e-font-brand"></i></a>
                                        </li>
                                        <li class="e-pagination-link--last">
                                            <a href="#"><i class="fa fa-angle-double-right e-font-brand"></i></a>
                                        </li>
                                    </ul>
                                    <div class="e-pagination-toolbar">
                                        <select class="form-control e-font-brand" style="width: 60px">
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="30">30</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                        <span class="pagination-desc">
                                当前显示 1 - 10 共 200 条数据
                            </span>
                                    </div>
                                </div>
                                <!--end: Pagination-->
                            </div>
                        </div>
                        <!--end: Section-->
                        <div class="e-separator  e-separator--border-dashed"></div>
                    </div>
                </div>
                <!--end: Pagination -->
            </div>
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>